<template>
  <div>
    <Drawer title="页面全局样式编辑"
            ref="PageGlobalStyleDrawer"
            :width="450"
            placement="left"
            :closable="false"
            :mask-closable="true"
            :draggable="false"
            transfer
            v-model="visible"
            @on-close="cancel">

      <Alert show-icon style="padding-right: 10px; text-align: justify;">
        此处编辑的样式建议只针对页面画布内的组件进行样式定义，不要设置画布乃至画布上层DOM的样式，编辑完成之后，请记得保存当前编辑的页面并刷新设计器查看编辑后的效果。
      </Alert>
      <Tooltip class="m-b-5px float-right" content="打开之后，在页面设计阶段，将不会加载当前编辑的自定义全局样式，切换之后，保存并刷新当前设计器页面即可生效" max-width="200" placement="right">
        <Checkbox v-model="designPhaseNotLoadGlobalStyle" @on-change="designPhaseNotLoadGlobalStyleChangeHandle">设计阶段不加载</Checkbox>
      </Tooltip>
      <div class="clearfix"></div>
      <CodeEditor v-model="pageGlobalStyleCode" :mode="'css'" :height="editorHeight" @on-submit-change="codeEditorSubmitChangeHandle"></CodeEditor>

    </Drawer>

  </div>
</template>

<script>

import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});

export default {
  name: "PageGlobalStyleDrawer",
  props: {
    show: {
      type: Boolean
    }
  },
  data() {
    return {
      visible: this.show,
      pageGlobalStyleCode: '',
      designPhaseNotLoadGlobalStyle: false
    }
  },
  mounted() {

  },
  methods: {

    init() {
      this.pageMetadata.layout.layoutConfigData.pageGlobalStyleCode == undefined ?
          this.pageGlobalStyleCode = '': this.pageGlobalStyleCode = this.pageMetadata.layout.layoutConfigData.pageGlobalStyleCode
      this.pageMetadata.layout.layoutConfigData.designPhaseNotLoadGlobalStyle == undefined ?
          this.designPhaseNotLoadGlobalStyle = false: this.designPhaseNotLoadGlobalStyle = this.pageMetadata.layout.layoutConfigData.designPhaseNotLoadGlobalStyle
    },

    codeEditorSubmitChangeHandle (code) {
      let layoutConfigData = this.pageMetadata.layout.layoutConfigData
      layoutConfigData.pageGlobalStyleCode = code
      this.$store.commit('designer/setLayoutConfigData', layoutConfigData)
    },

    designPhaseNotLoadGlobalStyleChangeHandle (val) {
      let layoutConfigData = this.pageMetadata.layout.layoutConfigData
      layoutConfigData.designPhaseNotLoadGlobalStyle = val
      this.$store.commit('designer/setLayoutConfigData', layoutConfigData)
    },

    cancel() {
      this.visible = false;
      this.$emit('cancel', this.visible)
      // 可以在这里编写关闭之后的逻辑处理
    }
  },
  computed: {
    ...mapFields({
      pageMetadata: 'pageMetadata'
    }),
    editorHeight () {
      return window.innerHeight - 210
    }
  },
  watch: {
    show(val) {
      this.visible = val
      if (val) {
        this.init()
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
